<template>
  <div>
    <el-select
      ref="searchselect"
      v-model="query"
      :multiple="multiple"
      :filterable="filterable"
      :placeholder="placeholder"
      clearable
      style="width:100%"
      :filter-method="filterMethod"
      :loading="loading"
      :allow-create="allowCreate"
      :disabled="disabled"
      @visible-change="visibleChange"
      @change="handleSelectChange"
      @clear="handleSelectClear"
    >
      <el-option
        v-for="item in options"
        :key="item.id"
        :label="item.label"
        :value="item.value"
      >
        <span style="float: left">{{ item.label }}</span>
        <span v-show="item.label1" style="float: right; color: #8492a6; font-size: 13px">{{ item.label1 }}</span>
      </el-option>
      <pagination
        :hidden="hidePage"
        style="padding: 0;margin-top: 10px;"
        :total="totalPages"
        :small="true"
        :background="false"
        :page.sync="currentPage"
        :limit.sync="pageSize"
        :layout="pageLayout"
        :page-count="5"
        @pagination="handlePageClick"
      />
    </el-select>
    <input type="text" :value="value" style="display:none;">
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
export default {
  name: 'LineupSearchSelect',
  components: { Pagination },
  props: {
    options: {
      type: Array,
      default: () => { return [] }
    },
    value: {
      required: true,
      type: [String, Number, Array],
      default: ''
    },
    placeholder: {
      type: String,
      default: '请选择要搜索的内容'
    },
    loading: {
      type: Boolean,
      default: false
    },
    totalPages: {
      required: true,
      type: Number
    },
    current: {
      type: Number,
      default: 1
    },
    size: {
      type: Number,
      default: 6
    },
    hidePage: {
      type: Boolean,
      default: false
    },
    allowCreate: {
      type: Boolean,
      default: false
    },
    multiple: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    filterable: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      query: '',
      querySearch: '',
      pageLayout: 'prev, pager, next'
    }
  },
  computed: {
    currentPage: {
      get() {
        return this.current
      },
      set(val) {
        this.$emit('update:current', val)
      }
    },
    pageSize: {
      get() {
        return this.size
      },
      set(val) {
        this.$emit('update:size', val)
      }
    }
  },
  watch: {
    value(val, oldVal) {
      this.query = val
    },
    query(val, oldVal) {
      this.$emit('input', val)
    }
  },
  created() {
    let el = ''
    if (this.value || this.value === 0) {
      this.query = this.value
      el = this.value
    }
    this.getOption({ current: this.currentPage, size: this.pageSize }, el)
  },
  methods: {
    filterMethod(el) {
      this.querySearch = el
      this.$emit('update:current', 1)
      this.getOption({ current: this.currentPage, size: this.pageSize }, el)
    },
    handlePageClick(el) {
      const { page, limit } = el
      if (this.querySearch) {
        this.getOption({ current: page, size: limit }, this.querySearch)
      } else {
        this.getOption({ current: page, size: limit })
      }

      this.$nextTick(() => {
        const dom = this.$refs.searchselect
        const inputDom = dom && dom.$children[0]
        if (inputDom && inputDom.focus) {
          inputDom.focus()
        }
      })
    },
    getOption(pageInfo, searchValue) {
      this.$emit('getOption', { pageInfo, searchValue })
    },
    visibleChange(el) {
      if (!el && this.querySearch) {
        this.querySearch = ''
        this.$emit('update:current', 1)
        this.getOption({ current: this.currentPage, size: this.pageSize })
        this.$nextTick(() => {

        })
      }
    },
    handleSelectChange(el) {
      this.$emit('change', el)
    },
    handleSelectClear() {
      this.querySearch = ''
      this.$emit('clear')
      this.$emit('update:current', 1)
      // this.getOption({ current: this.currentPage, size: this.pageSize })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-select-dropdown {
     position: absolute !important;
     top: 50px !important;
     left: 0 !important;
  }
</style>
